// projects 详情页
import { useState } from "react";
// Soft UI Dashboard PRO React example components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import PropTypes from "prop-types";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftSelect from "components/SoftSelect";
// Soft UI Dashboard PRO React example components
import DataTable from "examples/Tables/DataTable";
import SignalChart from "./SignalChart";

import SignalTimeTable from "./SignalTimeTable";
export default function ProjectDetails() {
  const [interval, setInterval] = useState(0);
  const [switchType, setSwitchType] = useState(false);
  const handleSetInterval = (event, newInterval) => setInterval(newInterval);
  const dataTableData = {
    columns: [
      { Header: "#", accessor: "index" },
      {
        Header: "Signal Time",
        accessor: "signalTime",
      },
      { Header: "Current Price", accessor: "currentPrice" },
      { Header: "Signal Price", accessor: "signalPrice" },
      { Header: "Action", accessor: "action" },
      { Header: "Signal Interval", accessor: "signalInterval" },
    ],
    rows: [
      {
        index: "1",
        currentPrice: "$ 67008.67",
        signalPrice: "$10",
        action: "Visa",
        signalInterval: "12/04/2020",
        signalTime: "Delivered",
      },
    ],
  };
  return (
    <>
      <DashboardLayout>
        <DashboardNavbar />
        <SignalChart />
        <SoftBox mt="44px" mb="24px">
          <Card>
            <SoftBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
              <SoftBox lineHeight={1}>
                <SoftTypography variant="h5" fontWeight="medium">
                  History
                </SoftTypography>
              </SoftBox>
            </SoftBox>
            <SoftBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
              <SoftBox display="flex" alignItems="center">
                <SoftTypography variant="span" color="text" fontSize="14px" sx={{ mr: 2 }}>
                  Signal Interval
                </SoftTypography>
                <SoftBox width="330px">
                  <AppBar position="static">
                    <Tabs
                      // orientation={tabsOrientation}
                      value={interval}
                      onChange={handleSetInterval}
                    >
                      <Tab label="15M" />
                      <Tab label="1H" />
                      <Tab label="2H" />
                      <Tab label="6H" />
                      <Tab label="12H" />
                    </Tabs>
                  </AppBar>
                </SoftBox>
              </SoftBox>
              <SoftBox width="264px">
                <SoftSelect
                  placeholder="Select Crypto"
                  isClearable
                  options={[
                    { value: "1", label: "Tron (TRC20)" },
                    { value: "2", label: "Solana (SOL)" },
                  ]}
                />
              </SoftBox>
            </SoftBox>
            <DataTable table={dataTableData} entriesPerPage={false} />
          </Card>
        </SoftBox>
        <SignalTimeTable />
      </DashboardLayout>
    </>
  );
}
